
<!DOCTYPE html>
<html>

<head>
<title>Applying a function to the Webcam</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../../build/js/Cindy.js"></script>
<script type="text/javascript" src="../../build/js/CindyGL.js"></script>
    <link rel="stylesheet" href="../../build/js/CindyJS.css">
<script id="csinit" type="text/x-cindyscript">
drawgrid=false;
width=640;
height=640/4*3;
video = camera video(resolution -> [640,4/3]);
createimage("output", width, height);
createimage("input", width, height);
colorplot("output", 0);

bw(x):=(.35*x_1+.45*x_2+.2*x_3);
f(x):=x*2;

</script>
<script id="csdraw" type="text/x-cindyscript">
if(drawgrid,
linecolor((.5,.5,.5));
repeat(65,start->0,step->.2,draw((#,0),(#,4.8)));
repeat(25,start->0,step->.2,draw((0,#),(12.8,#)));
);
	draw((3.2,1.25),(3.5,1.25),color->(0,0,0),size->3);
	draw((6.70,1.25),(7.0,1.25),color->(0,0,0),size->3, arrow->true, arrowshape->"full", arrowsides->"==>", arrowsize->1.5, arrowposition->1);

	// get current definition of f and redefine if it changed
	if(Input.text!=lastf & Input.text!="",
		parse("f(x) := re(round(" + Input.text+"))");
		lastf = Input.text;
	);

			if (image ready(video),
  colorplot("input", bw(imagergb(video, #)));
  colorplot("output", mod(f(255*bw(imagergb("input",#))),256)/255);
);

draw image (A, B, "input");

draw image (C, D, "output");

</script>
<script type="text/javascript">
var cdy = CindyJS({
  ports: [{id: "CSCanvas", transform:[{visibleRect:[0,0,10.24,2.4]}]}],
  scripts: "cs*",
  language: "en",
  defaultAppearance: {
  },
  geometry: [
    {name:"A", type:"Free", pos:[0,0], visible:false},
      {name:"B", type:"Free", pos:[320/100,0], visible:false},
      {name:"C", type:"Free", pos:[700/100,0], visible:false},
      {name:"D", type:"Free", pos:[1020/100,0], visible:false},
      {name:"E", type:"Free", pos:[320/100,1.20], visible:false},
      {name: "Input", type: "EditableText", pos: [3.55, 1.2],
          color: [0.0, 0.0, 0.0],
          fillcolor: [1.0, 0.784, 0.0],
          fillalpha: 0.5, minwidth: 310, text: "x*2"}

  ],
  use: ["CindyGL","katex"]
});
</script>
</head>

<body style="font-family:Arial,serif;">
  <h1>Applying a function to the webcam data</h1>
  <div id="CSCanvas" style="width: 1024px; height: 240px; border:0;margin: 0;"></div>
  <p>Every pixel is represented by a value between 0 and 255.
      Applying a function to the image on the left results
      in the image on the right.</p>
  <p> The function is calculated modulo 256.</p>
</body>

</html>
